<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8"/>
			<title>Css基础练习</title>
			<style>
				.naviul{
					list-style-type:none;
					margin:0;
					padding:0;  /*ul 自带了padding*/
					width:25%;
					height:300px;
					text-align:center;
					position:fixed;
					left:0;
				}
				.naviul li{
					border:1px black solid;	
				}
				.naviul a{
					text-decoration:none;
					display:block;
					width:100%;
				}
				.naviul a:hover:not([class="myactive"]){
					background-color:#555;
					color:white;
				}
				.myactive{
					background-color:green;
					color:white;
				}
				.mycontent{
					width:75%;
					height:100px;
					margin-left:25%;
					border:1px red solid;
				}
				
				.naviHengul{
					background-color:black;
					height:50px;
					vertical-align:middle;
				}
				.naviHengul li{
					text-align:center;
					display:inline-block;
					border:1px red solid;
					height:100%;
					vertical-align:middle;
					width:140px;
					margin-left:-5px;
				}
				.naviHengul li a{
					color:white;
					line-height: 2.4;
					text-decoration:none;
					font-size:20px;
					display:inline-block;
					height:100%;
					width:100%;
				}
				
				.popdiv{
				
				}
				.popdiv:hover #mypop{
					display:block;
				}
				#mypop{
					display:none;
					position: relative;
					background-color: #f9f9f9;
					min-width:160px;
					padding:12px 16px;
					width:20px;
					margin-top:-75px;
					margin-left:40px;
					box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
				}
				
				
				.selcontent{
					display:none;
				  position: absolute;
				  background-color: #f9f9f9;
			    min-width: 260px;
			    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				}
			
				.seldiv:hover .selcontent{
					display:block;
				}
				.selcontent a{
						display:block;
						text-decoration:none;
				}
			
				.popdivA{
					position:relative;
					display:inline-block;
				}
				.popdivA:hover #mypopA{
					display:block;
				}
				#mypopA{
					display:none;
					width:120px;
					background-color:black;
					color:white;
					text-align:center;
					border-radius:6px;
					
					position:absolute;
					z-index:1;
					left:50%;
					bottom:100%;
					margin-left:-60px
				}
				
				//箭头
				#mypopA::after{
				  content: "";
			    position: absolute;
			    top: 50%;
			    right: 100%;
			    margin-top: -5px;
			    border-width: 5px;
			    border-style: solid;
			    border-color: transparent black transparent transparent;
				}
				
				
				div.image a{
					float:left;
					margin-left:5px;
				  border:1px solid #ccc;
				  height:180px;
				  width:150px;
					
				}
				
				div.image a:hover{
						border:1px solid #777;
				}
				
				div.image img{
					width:100%;
				  height:100px;
				  border-bottom-style:none;
				}
				.imgdesc{
					text-align:center;
					vertical-align:middle;
					padding:15px;
					font-size:14px;
					border-top-style:none;
				}
				.opacityTest:hover{
					opacity:0.5;
				
				
				}
				.opacityTest{
					width:300px;
					height:100px;
					border:1px black solid;
					text-align:center;
					vertical-align: middle;
					display:table-cell;
				}
				#mySearch{
					width:300px;
					height:30px;
					border:2px solid #ccc;
					background-color:white;
					background-image:url("https://static.runoob.com/images/mix/searchicon.png");
					background-repeat:no-repeat;
					background-position:5px 5px;
					padding:2px 30px;
					font-size:16px;
					border-radius:6px;
					box-sizing: border-box;
					box-sizing: border-box;
				}
				
				#mySearch:focus{
					width:60%;
					-webkit-transition: width 0.5s ease-in-out;/*Safari */
 				  transition: width 0.5s ease-in-out;
				}
				
				#mytextarea{
					  border: 2px solid #ccc;
					  border-radius:4px;
					  width: 50%;
 					  height: 150px;
 					  box-sizing: border-box;
 					  background-color: #f8f8f8;
  					font-size: 16px;
  					padding: 12px 20px;
  					
  					resize:none;
				}
			</style>
	</head>
	<body>
		<div>
			<div>垂直导航栏</div>
			<div>
				<ul class="naviul">
					<li><a href="#" class="myactive">百度</a></li>
					<li><a href="#" >网易</a></li>
					<li><a href="#" >必应</a></li>
					<li><a href="#" >关于</a></li>
				</ul>
				<div class="mycontent"></div>
			</div>
		</div><br/><br/>
		
		
		
		<div>
			<div>水平导航栏</div>
			<div>
				<ul class="naviHengul">
					<li><a href="#" class="myactive">百度</a></li>
					<li><a href="#" >网易</a></li>
					<li><a href="#" >必应</a></li>
					<li><a href="#" >关于</a></li>
				</ul>
			</div>
		</div><br/><br/>
		
		
		<div>
				<div>提示框(参照html绝对定位)</div>
				<div class="popdiv">
						<span >鼠标放在这里</span>
						<div id="mypop">弹窗提示</div>
				</div>
		</div><br/><br/>
		
				<div>
				<div>提示框(参照上一级定位元素绝对定位)</div>
				<div class="popdivA">
						<span >鼠标放在这里</span>
						<div id="mypopA">弹窗提示A</div>
				</div>
		</div><br/><br/>
		
		
		<div>
			<div>下拉菜单</div>
			<div class="seldiv">
			<span class="seltitle">城市</span>
				<div class="selcontent">
					<a href="a">北京</a>
					<a href="b">上海</a>
					<a href="c">成都</a>
				</div>
			</div>
		</div><br/><br/>
		
		
		<div>
			<div>图片墙</div>
			<div class="image">
					<a href="https://static.runoob.com/images/demo/demo1.jpg"><img src="https://static.runoob.com/images/demo/demo1.jpg"/>
							<div class="imgdesc">这里添加文本描述</div>
					</a>
					<a href="https://static.runoob.com/images/demo/demo2.jpg"><img src="https://static.runoob.com/images/demo/demo2.jpg"/>
						<div class="imgdesc">这里添加文本描述</div>
					</a>
					<a href="https://static.runoob.com/images/demo/demo3.jpg"><img src="https://static.runoob.com/images/demo/demo3.jpg"/>
						<div class="imgdesc">这里添加文本描述</div>
					</a>					
					<a href="https://static.runoob.com/images/demo/demo4.jpg"><img src="https://static.runoob.com/images/demo/demo4.jpg"/>
						<div class="imgdesc">这里添加文本描述</div>
					</a>
			</div>
		</div><br/><br/>
		

		
		
		<div style="clear:both"><br/><br/>
			<div>透明度opacity</div>
			<div>
				<div class="opacityTest" >测试透明度的文字</div>
				<img style="opacity:0.5" src="https://static.runoob.com/images/demo/demo3.jpg" height="100px" width="302px"/>
			</div>
		</div><br/><br/>


		<div>
			<form>
				<input type="text" id="mySearch" name="mysearch" placeholder="搜索……"/>
			</form>
		</div><br/><br/>
		
		<div>
			 <div>textarea 的resize=none设置不能调整大小</div>
			 <div><textarea id="mytextarea"> 输入文字 </textarea></div>
			 
		</div>
	</body>
</html>